<template>
  <div class="app-container">
    <div class="search-container">
      <div class="button-container">
        <el-button :disabled="true" type="danger"><el-icon>
            <Plus />
          </el-icon>&nbsp;新增</el-button>
        <el-button :disabled="false" type="danger" @click="submitForm(ruleFormRef)"><el-icon>
            <Plus />
          </el-icon>&nbsp;保存</el-button>
        <el-button :disabled="true" type="danger"><el-icon>
            <Plus />
          </el-icon>&nbsp;撤销</el-button>
        <el-button :disabled="true" type="danger"><el-icon>
            <Plus />
          </el-icon>&nbsp;删除</el-button>
      </div>
      <div>
        <el-form ref="dataFormRef" style="max-width: 100% ;margin-top:20px" :model="form" :rules="rules"
          label-width="auto" class="demo-ruleForm" :inline="true" :size="formSize" status-icon>
          <el-form-item label="采购员" prop="buyer">
            <el-select v-model="form.userId" clearable style="width: 150px">
              <el-option label="刘永刚" :value="1" />
              <el-option label="孟盘龙" :value="2" />
              <el-option label="赵秋实" :value="3" />
              <el-option label="牛骞若" :value="4" />
              <el-option label="赵思彤" :value="5" />
              <el-option label="于晋哲" :value="6" />
            </el-select>
          </el-form-item>
          <el-form-item label="妊检日期" required style="width: 300px">
            <el-form-item prop="date1">
              <el-date-picker v-model="form.pregnancyDate" type="date" aria-label="Pick a date" format="YYYY-MM-DD"
                value-format="YYYY-MM-DD" placeholder="Pick a date" style="width: 100%" />
            </el-form-item>
          </el-form-item>
          <el-form-item label="单据号" prop="buyer" style="width: 150px">
            -- --
          </el-form-item>
        </el-form>
      </div>

      <div>
        <el-table :data="tableDate" style="width: 100% ; height:350px">
          <el-table-column prop="id" label="序号" align="center" width="180">
            <template #default="scope">
              <span>{{ scope.$index + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="earTag" label="耳号" align="center" width="180">
            <template #default="scope">
              <el-select v-model="scope.row.earTag" placeholder="请选择耳号" @change="detilLambWean()">
                <el-option :label="item.earTag" :value="item.earTag" v-for="item in tableDatas" />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column prop="pregnancyResult" label="妊检结果" align="center" width="180">
            <template #default="scope">
              <el-select v-model="scope.row.pregnancyResult" placeholder="请选择妊检结果">
                <el-option label="空胎" :value="1" />
                <el-option label="返情" :value="2" />
                <el-option label="流产" :value="3" />
                <el-option label="怀孕" :value="4" />
                <el-option label="未孕" :value="5" />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column prop="pregnancyManner" label="妊检方式" align="center" width="180">
            <template #default="scope">
              <el-select v-model="scope.row.pregnancyManner" placeholder="请选择妊检方式">
                <el-option label="公羊试情" :value="1" />
                <el-option label="人工检查" :value="2" />
                <el-option label="B超检查" :value="3" />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column prop="parityNum" label="同胎数" align="center" width="180">
            <template #default="scope">
              <el-input v-model="scope.row.parityNum" />
            </template>
          </el-table-column>
          <el-table-column prop="pregnancyNum" label="妊娠天数" align="center" width="180">
            <template #default="scope">
              <el-input v-model="scope.row.pregnancyNum" />
            </template>
          </el-table-column>
          <el-table-column prop="currentBuilding" label="当前栋舍" width="140">
            <template #default="scope">
              <el-select v-model="scope.row.currentBuilding" placeholder="请选择栋舍ID"
                @change="getcolumnIdList(scope.row.currentBuilding)" :disabled="true">
                <el-option :label="item.ridgepoleName" :value="item.ridgepoleId" v-for="item in buildingIdList" />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column prop="currentField" label="当前栏位" width="140">
            <template #default="scope">
              <el-select v-model="scope.row.currentField" placeholder="请选择当前栏位" :disabled="true">
                <el-option :label="item.columnName" :value="item.columnManagementId" v-for="item in columnIdList" />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column prop="toBuildingManageId" label="转入栋舍" width="140">
            <template #default="scope">
              <el-select v-model="scope.row.toBuildingManageId" placeholder="请选择转入栋舍"
                @change="getcolumnIdList(scope.row.toBuildingManageId)">
                <el-option :label="item.ridgepoleName" :value="item.ridgepoleId" v-for="item in buildingIdList" />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column prop="toColumMangementId" label="转入栏位" width="140">
            <template #default="scope">
              <el-select v-model="scope.row.toColumMangementId" placeholder="请选择转入栏位">
                <el-option :label="item.columnName" :value="item.columnManagementId" v-for="item in columnIdList" />
              </el-select>
            </template>
          </el-table-column>
        </el-table>

      </div>
      <div class="count1">
        <el-button link type="danger" @click="Addform()"> + 增行 </el-button>
        <el-button link type="danger" @click="Deleteform()"> - 删行 </el-button>
      </div>
      <div class="count2">
        <el-form ref="ruleFormRef" :model="form" label-width="auto" class="demo-ruleForm" status-icon>
          <el-form-item label="备注">
            <el-input v-model="form.pregnancyContext" type="textarea" placeholder="请输入备注信息" />
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>

</template>
<script setup lang="ts">
import hybridization from '@/api/Hybridization/index'
import { hybridizationquery } from '@/api/Hybridization/model'
import sheepfile from '@/api/ProductionManagement/index'
import purcure from '@/api/PurchaseMent/index'
import sheepPregnancy from '@/api/SheepPregnancy/index'
import router from '@/router';
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()

//参数
const form = reactive({
  "pregnancyDate": "",
  "userId": null,
  "pregnancyContext": "",
})
//参数
const tableDate = reactive([
  {
    "earTag": "",
    "pregnancyResult": null,
    "pregnancyDate": "",
    "pregnancyManner": null,
    "parityNum": null,
    "pregnancyNum": null,
    "currentBuilding": null,
    "currentField": null,
    "toBuildingManageId": null,
    "toColumMangementId": null,
    "pregnancyContext": "",
    "userId": null
  }
])

//验证
const rules = reactive<FormRules<RuleForm>>({
  name: [
    { required: true, message: 'Please input Activity name', trigger: 'blur' },
    { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
  ],
})

//获取配种耳号
const hybridizationquerys = reactive<hybridizationquery>({
  earTag: "",
  pageIndex: 1,
  pageSize: 100,
  sdate: "",
  edate: "",
  userId: 0,
})
const tableDatas: any = ref([])
const GethybridizationList = () => {
  hybridization.getList(hybridizationquerys).then((res: any) => {
    console.log('完整响应数据:', res);
    tableDatas.value = res.data.data
  })
}

//获取栋舍
const forms = reactive<buildingIdQuery>({
  "pageIndex": 1,
  "pageSize": 100,
  "ridgepoleTypeId": 0,
  "ridgepoleName": "",
  "responsiblePerson": ""
})
const buildingIdList: any = ref([])
const getBuildingIdList = () => {
  purcure.getrid(forms).then((res: any) => {
    buildingIdList.value = res.data.data
  })
}

//获取栏位
const columnIdList: any = ref([])
const getcolumnIdList = (id: any) => {
  console.log(id)
  purcure.getcolumn(id).then((res: any) => {
    columnIdList.value = res.data
    console.log(columnIdList.value)
  })
  columnIdList.value = []
}

//反填
const detilLambWean = async () => {
  for (let item of tableDate) {
    try {
      const res = await sheepfile.detilsheepfile(item.earTag);

      item.earTag = res.data.earTag;
      getBuildingIdList();
      item.currentBuilding = res.data.buildingId;

      getcolumnIdList(item.currentBuilding);
      item.currentField = res.data.columnId;
    } catch (error) {
      console.error('Error fetching data for earTag:', item.earTag, error);
    }
  }
};


//增行
const c = ref(0);
const Addform = () => {
  c.value = 1;
  tableDate.forEach((item) => {
    c.value++;
  });
  tableDate.push({
    "earTag": "",
    "pregnancyResult": null,
    "pregnancyManner": null,
    "parityNum": null,
    "pregnancyNum": null,
    "currentBuilding": null,
    "currentField": null,
    "toBuildingManageId": null,
    "toColumMangementId": null,
  })
}
//删行
const Deleteform = () => {
  tableDate.pop();
  localStorage.setItem("data", JSON.stringify(tableDate));
};

//添加方法
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      tableDate.forEach(c => {
        c.userId = form.userId,
          c.pregnancyDate = form.pregnancyDate,
          c.pregnancyContext = form.pregnancyContext
      })
      console.log(tableDate)
      sheepPregnancy.addpregnancy(tableDate).then(res => {
        ElMessage.success('添加成功')
        c.value = res

      })

    } else {
      console.log('error submit!', fields)
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

onMounted(() => {
  getBuildingIdList()
  GethybridizationList()
})


</script>
